import React from "react";
import { Link } from "react-router-dom";
import "./styles.css";
import axios from 'axios';
/**
 * Define UserPhotos, a React component of CS142 Project 5.
 */
class UserPhotos extends React.Component {
  constructor(props) {
    super(props);
    this.scrollableElement = React.createRef();
    
  }

  isComment(comments){
    return(comments.map((item, index) => (
      <div key={index} style={{ whiteSpace: 'pre' }}>
        <h3>  commenter:</h3>{<div style={{backgroundColor: "#f0f0f0", width: "150px", border: "1px solid #D3D3D3"}}><Link to={`/users/${item.user._id}`} style={{ color: 'inherit', textDecoration: 'none' }} >{"      "+item.user.first_name + " " + item.user.last_name}</Link></div>}
        <h3>  comment:</h3>{"      "+item.comment}
        <h3>  date_time:</h3>{"      "+item.date_time.replace(/-/g, '/')}
      </div>
    )));
  }
  render() {
    const photos = JSON.stringify(
      window.cs142models.photoOfUserModel(this.props.match.params.userId)
    );
    const photosArr = JSON.parse(photos);
    const kong = <div style={{color: "#555555", fontSize: "40px"}}>NULL</div>;
    const pics = photosArr.map((item, index) => (
      <div key={index} style={{ whiteSpace: 'pre' }}>
        <img src={`../images/${item.file_name}`} style={{height: "300px", width: "500px", display: "block", marginLeft: "auto", marginRight: "auto"}}/>
        <h3>id:</h3>{"  "+item._id}
        <h3>date_time:</h3>{"  "+item.date_time.replace(/-/g, '/')}
        <h3>user_id:</h3>{"  "+item.user_id}
        <h2>comments:</h2>
        {item.comments?this.isComment(item.comments):kong}
        <hr></hr>
      </div>
    ));
    return (
      <div style={{marginTop: "40px"}}>
        <div ref={this.scrollableElement} className="scrollContent">
          {pics}
        </div>
      </div>
    );
  }
}

export default UserPhotos;
